import React from 'react';
import { Layout, Menu } from 'antd';
import { menu } from '@/menu';
import { Link, Outlet } from 'react-router-dom';
import { nanoid } from 'nanoid';

const { Header, Content, Footer, Sider } = Layout;

const BasicLayout = () => {
  const formatMenuToAntd = (menu: any[]): any[] => {
    return menu.map((item) => {
      const { title, caseCode, appCode, children } = item;

      // 创建唯一的 key
      const key = nanoid();

      // 目录：有 children，不可点击
      if (children && children.length > 0) {
        return {
          key,
          label: title, // 纯文本，不包装 Link
          children: formatMenuToAntd(children), // 递归处理子菜单
        };
      }

      // 叶子节点：有 caseCode，可点击，生成 path 和 Link
      if (caseCode) {
        const path = `/${caseCode}`; // 路由路径
        return {
          key,
          label: <Link to={path}>{title}</Link>, // 包装 Link
          path, // 附加 path 字段，方便后续使用
        };
      }

      // 兜底：无 children 也无 caseCode，视为不可点击项
      return {
        key,
        label: title,
      };
    });
  };
  const formattedMenu = formatMenuToAntd(menu);

  return (
    <Layout>
      <Sider>
        <Menu items={formattedMenu} mode="inline" theme="dark"></Menu>
      </Sider>
      <Layout>
        <Content>
          {/** 嵌套路由(插槽) */}
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
